<%--
  Created by IntelliJ IDEA.
  User: CY
  Date: 2018/5/16
  Time: 15:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%  String point=(String) request.getSession().getAttribute("coordinatePoint");%>
<html>
<head>
    <title>党建地图</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=YECw4heQ9wzy7RKg8OW9QLMsySKzQRan"></script>
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <%--<script src="/js/street/TwoPointFive.js"></script>--%>
    <style>
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        .head{height:50px}
        #map{width:100%;height:100%}
        .rightNav {
            position: fixed;
            top: 20%;
            right: 1%;
            width: 135px;
            height: 220px;
            z-index: 999;
            /*display: none;*/
        }
        .txt{
            color:#fff;
            font-size:14px;
            display: inline-block;
            width:56px;
            height: 30px;
            text-align: center;
            position: relative;
            cursor:pointer;
            line-height: 23px;
            padding-left:12px;
            padding-top: 4px;
            /*word-break: break-all;*/
            text-overflow: ellipsis;
            white-space: nowrap;
            /*display: -webkit-box; !** 对象作为伸缩盒子模型显示 **!*/
            /*-webkit-box-orient: vertical; !** 设置或检索伸缩盒对象的子元素的排列方式 **!*/
            /*-webkit-line-clamp: 1; !** 显示的行数 **!*/
            overflow: hidden;  /** 隐藏超出的内容 **/
        }
        .rightNav .one{
            background: url(/img/grid/btnxuanzhong.png) no-repeat;
            background-size: 100% 100%;
            -ms-behavior: url(/css/main/backgroundsize.min.htc);
            behavior: url(/css/main/backgroundsize.min.htc);
            width: 96%;
            height: 34px;
            line-height: 34px;
            margin-top: 10px;
            cursor: pointer;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
        .rightNav .one.active {
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .rightNav .one:hover{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }

        .qiye {
            position: fixed;
            top: 20%;
            left: 1%;
            width: 135px;
            height: 220px;
            z-index: 999;
            display: none;
        }
        .qiye .two{
            background: url(/img/grid/btnxuanzhong.png) no-repeat;
            background-size: 100% 100%;
            -ms-behavior: url(/css/main/backgroundsize.min.htc);
            behavior: url(/css/main/backgroundsize.min.htc);
            width: 96%;
            height: 34px;
            line-height: 34px;
            margin-top: 10px;
            cursor: pointer;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
        .qiye .two.active {
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .qiye .two:hover{
            background: url(/img/grid/activexuanzhong.png) no-repeat;
        }
        .outer{
            width:90px;
            height:30px;
            position:absolute;
            background-size:100% ;
            z-index: 99999;
        }
        .inner{
            color:#fff;
            font-size:14px;
            display: inline-block;
            width:73px;
            text-align: center;
            position: relative;
            cursor:pointer;

        }
        .headImg{
            position: absolute;
            left: -37px;
            top: 0px;
        }
        .topName{
            display: inline-block;
            width: 80px;
            line-height: 30px;
            padding-left: 30px;
            text-align: left;
        }
        .botName{
            display: inline-block;
            width: 100px;
            line-height: 22px;
            padding-left: 30px;
            text-align: left;
        }

        .clearfx{
            width:100%;
            line-height: 50px;
            font-size:14px;
            /*height: 50px;*/
        }
        .cont{
            border-bottom: 1px dashed #eeeeee;
            width:80%;
            /*height:50px;*/
            /*margin-left: 40px;*/
            float:left
        }
        .left{
            /*width:30%;*/
            /*float:left;*/
            text-align: right;
            margin-left:3px;
        }
        .right{
            width:64%;
            /*float:left;*/
            text-align: left;
            margin-left:5%;
        }
        .img{
            float:left;
            vertical-align: middle;
            margin-top: 15px;
            margin-left:20px;
        }
        table{
            width:90%;
            margin:10px auto;
        }
    </style>
    <script src="/js/jquery/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layer/layer.js?20201106" type="text/javascript" charset="utf-8"></script>
    <script src="/js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <%--<script type="text/javascript" src="/js/street/Library.js"></script>--%>
</head>
<body onload="maps.gridMap()">
    <ul class="rightNav">
        <li class="one active" data-type="0">党组织</li>
        <li class="one" data-type="1">党员</li>
        <li class="one" data-type="2">宣传阵地</li>
    </ul>
    <div id="map"></div>
<script>

    var map = new BMap.Map("map");
   // var point = new BMap.Point(118.019131,34.341107);
    var point = new BMap.Point(<%=point%>);
    var map = new BMap.Map("map", {mapType: BMAP_HYBRID_MAP, minZoom: 1, maxZoom: 18});
    //设置地图类型及最小最大级别
//    var marker = new BMap.Marker(point); //将点转化成标注点
//    map.addOverlay(marker);  //将标注点添加到地图上
    //添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
        mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]}));
    //设置地图级别（1-18）
    map.centerAndZoom(point, 12);
    //开启滚轮缩放地图
    map.enableScrollWheelZoom();

//    绘制自定义覆盖物
//    //        1\定义构造函数
    function ComplexCustomOverlay(point,img,name,id,con,grid,type,title){
        this._point = point;
        this._img = img;
        this._name = name;
        this._id = id;
        this._con = con;
        this._grid = grid;
        this._type = type;
        this._title = title;
    }
    // 继承API的BMap.Overlay
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    //2、初始化自定义覆盖物实现初始化方法
    ComplexCustomOverlay.prototype.initialize = function(map){
        // 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var div = this._div = document.createElement("div");
        div.style.backgroundImage = 'url('+this._img+')'
        div.setAttribute('class','outer');
        div.setAttribute('name',this._name);
        div.setAttribute('id',this._id);
        div.setAttribute('content',this._con);
        div.setAttribute('grid',this._grid);
        div.setAttribute('type',this._type);
        div.setAttribute('title',this._title);
        div.setAttribute("point",this._point);

        div.innerHTML= '<div class="inner">'+this._con+'</div>'
        // 将div添加到覆盖物容器中
        map.getPanes().labelPane.appendChild(div);
        //getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;
    }
    //3、绘制覆盖物
    // 实现绘制方法
    ComplexCustomOverlay.prototype.draw = function(){
        var _map = this._map;
//            var marker = new BMap.Marker(_map);
//            map.overlayPixelToPoint(this._point);
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - 50 + "px";
        this._div.style.top  = pixel.y - 20 + "px";
    }

    //    nav点击事件
    $('.rightNav .one').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        $('.qiye').hide();
        if($(this).attr('data-type')==0){
            map.clearOverlays();
            maps.gridMap();
        }else if($(this).attr('data-type')==1){
            map.clearOverlays();
            maps.CommunityMap();
        }else if($(this).attr('data-type')==2){
            map.clearOverlays();
            maps.xczdMap();
        }
    })

    function check(name){
        if(name == undefined){
            return ''
        }else{
            return name;
        }
    }

    $(document).on('click','.outer',function(){
        var type=$(this).attr('type');
        var id = $(this).attr('id');
        var name = $(this).attr('name');
        if(type == 1){
            $.post('/orgDepartment/queryByIdOrgDepartmentWithBLOBs',{deptId:id},function(res){
                var data= res.data;
                layer.open({
                    type:1,
                    title: ['党组织', 'background-color:#2b7fe0;color:#fff;'],
                    area: ['350px', '370px'],
                    btn: 0,
                    content:'<ul>' +
                    '<li class="clearfx"><img src="../../img/mc.png" alt="" class="img"><div class="cont"><span class="left">党组织名:</span><span class="right">'+check(data.orgDeptName) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">党员数:</span><span class="right">'+check(data.orgOrgconut) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">上次换届时间:</span><span class="right">'+check(data.orgOldDate)+'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">本次换届时间:</span><span class="right">'+check(data.orgNewDate) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">党组织书记:</span><span class="right">'+check(data.orgUserorg) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">联系方式:</span><span class="right">'+check(data.orgIphone) +'</span></div></li>' +
                    '</ul>'
                })
            })
        }else if(type == 2){
            $.get('/OrgPartyMember/selectList',{addressLocation:name,page:1,pageSize:5,useFlag:true},function(res){
                var data=res.obj[0];
                layer.open({
                    type:1,
                    title: ['党员信息', 'background-color:#2b7fe0;color:#fff;'],
                    area: ['350px', '370px'],
                    btn: 0,
                    content:'<ul>' +
                    '<li class="clearfx"><img src="../../img/mc.png" alt="" class="img"><div class="cont"><span class="left">所属党支部:</span><span class="right">'+check(data.orgDeptName) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">姓名:</span><span class="right">'+check(data.name) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">性别:</span><span class="right">'+check(data.sex)+'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">民族:</span><span class="right">'+check(data.familyName) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">联系方式:</span><span class="right">'+check(data.tel) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">入党日期:</span><span class="right">'+check(data.birthday) +'</span></div></li>' +
                    '</ul>',
                    success:function(res) {

                    }
                })
            })

        }else if(type == 3){
            $.get('/position/getActivityById',{pId:id},function(res){
                var data=res.object;
                layer.open({
                    type:1,
                    title: ['宣传阵地信息', 'background-color:#2b7fe0;color:#fff;'],
                    area: ['350px', '370px'],
                    btn: 0,
                    content:'<ul>' +
                    '<li class="clearfx"><img src="../../img/mc.png" alt="" class="img"><div class="cont"><span class="left">所属网格:</span><span class="right">'+check(data.orgDeptName) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/newsq.png" alt="" class="img"><div class="cont"><span class="left">名称:</span><span class="right">'+check(data.name) +'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">位置:</span><span class="right">'+check(data.place)+'</span></div></li>' +
                    '<li class="clearfx"><img src="../../img/fr.png" alt="" class="img"><div class="cont"><span class="left">面积:</span><span class="right">'+check(data.area) +'</span></div></li>' +
                    '</ul>'
                })
            })

        }

    })



    var maps={
//      党组织地图
        gridMap:function(){
            var overlays = [];
            $.ajax({
                url:'/orgDepartment/selectSum',
                dataType:'json',
                success:function(res){
                    var data = res.obj;
                    for(var i=0;i<data.length;i++){
                        if(data[i].gridLocation !="" && data[i].gridLocation != undefined){
                            overlays.push(data[i])
                        }
                    }
//                    console.log(overlays)
                    for(var j = 0;j<overlays.length;j++){

                        var lng = overlays[j].gridLocation.split(',')[0];
                        var lat = overlays[j].gridLocation.split(',')[1];
                        var point = new BMap.Point(lng,lat)
                        var Icon = '/img/map/noZi/dang.png';
                        var con = ' <span class="txt"  style="margin-left: 20px" title="'+overlays[j].orgDeptName+'">'+overlays[j].orgDeptName+'</span>'
                        //                        point,img,name,id,con,grid,type,title
                        var myCompOverlay = new ComplexCustomOverlay(point,Icon,overlays[j].orgDeptName,overlays[j].orgDeptId ,con,'',1,overlays[j].orgDeptName ,point);
                        map.addOverlay(myCompOverlay);//将标注添加到地图中
                    }
                }
            })
        },
        //      党员地图
        CommunityMap:function(){
            var overlays = [];
            $.ajax({
                url: '/OrgPartyMember/selectByList',
                dataType: 'json',
                success: function (res) {
                    var data = res.obj;

                    for (var i = 0; i < data.length; i++) {
                        if (data[i].addressLocation != "" && data[i].addressLocation != undefined) {
                            overlays.push(data[i])
                        }
                    }

//                    console.log(overlays)

                        for (var j = 0; j < overlays.length; j++) {

                            var lng = overlays[j].addressLocation.split(',')[0];
                            var lat = overlays[j].addressLocation.split(',')[1];
                            var point = new BMap.Point(lng, lat)
                            var Icon = '';
                            var con = '<img src="/img/map/red.png" />';
//                        var con = '<span class="txt" style="margin-left: 10px">党组织</span> <span class="botName"  style="margin-left: 20px" title="'+overlays[j].orgDeptName+'">'+overlays[j].orgDeptName+'</span>'
                            //                        point,img,name,id,con,grid,type,title
                            var myCompOverlay = new ComplexCustomOverlay(point, Icon, overlays[j].addressLocation, overlays[j].opId, con, '', 2, overlays[j].name);
                            map.addOverlay(myCompOverlay);//将标注添加到地图中
                        }

                }
            })
        },
        //宣传阵地
        xczdMap:function(){
            var overlays = [];
            $.ajax({
                url: '/position/getActivityList',
                data:{orgDeptId:1,page:1,pageSize:10,useFlag:false},
                dataType: 'json',
                success: function (res) {
                    var data = res.obj;

                    for (var i = 0; i < data.length; i++) {
                        if (data[i].remark2 != "" && data[i].remark2 != undefined) {
                            overlays.push(data[i])
                        }
                    }

//                    console.log(overlays)

                    for (var j = 0; j < overlays.length; j++) {

                        var lng = overlays[j].remark2.split(',')[0];
                        var lat = overlays[j].remark2.split(',')[1];
                        var point = new BMap.Point(lng, lat)
                        var Icon = '/img/map/xuanBack.png';
                        var con = '<span class="txt" style="margin-left: 20px" title="'+overlays[j].activityPlace+'">'+overlays[j].activityPlace+'</span> '

                        var myCompOverlay = new ComplexCustomOverlay(point, Icon, overlays[j].application, overlays[j].pId, con, '', 3, overlays[j].activityPlace);
                        map.addOverlay(myCompOverlay);//将标注添加到地图中
                    }

                }
            })
        },

    }

</script>
</body>
</html>
